<template>
  <div class="community">
    <ul class="left-menu">
      <li class="menu" v-for="item in menuList" :class="{active:counterPage ===item.index}" @click="menu(item.index,item.path)">
        <div class="menu-body">
          <img :src="item.icon" class="menu-icon">
          <div class="menu-title">{{ item.title }}</div>
        </div>
      </li>
    </ul>
    <div class="right-body">
    <!-- <router-view v-slot="{ Component }">
      <transition name="slide" mode="out-in">
        <component :is="Component" />
      </transition>
    </router-view> -->

    <Transition name="slide" mode="out-in">
        <router-view></router-view>
      </Transition>
    </div>
  </div>
</template>

<script setup>
// import boxsList from './faxian.vue';
import { onMounted, ref,watch } from 'vue';
import useCounter from '../../stores/pinia';
import { parseJwt } from '../../stores/pinia';
import { useRouter,useRoute } from 'vue-router';
import { handleRouteChange } from '../../router/router';

import discoveryIcon from '@/assets/icon/faxian.png';
import publishIcon from '@/assets/icon/fabu.png';
import notificationIcon from '@/assets/icon/lingdang.png';

const counterStore=useCounter()
const router= useRouter()
const route=useRoute()
const counterPage=ref("/faxian")

const user=ref()
const menuList = ref([
  { icon: discoveryIcon, title: "发现", path: "/community/faxian", index: "faxian" },
  { icon: publishIcon, title: "发布", path: "/community/fabu", index: "fabu" },
  { icon: notificationIcon, title: "通知", path: "/community/tozhi", index: "tozhi" },
  { icon: '', title: "我", path: "/community/wo", index: "wo" },
]);

const menu=(index,path)=>{
  // console.log("点击了"+index+path)
  // counterPage.value=index
  router.push(path)
  // console.log(route.path); // 打印当前路径
}

onMounted(()=>{
  if(counterStore.jwt){
    user.value=parseJwt(counterStore.jwt)
    menuList.value[3].icon=user.value.imageUrl
    const fullPath = route.path;
    counterPage.value=handleRouteChange(route,1)
  }else{
    router.push('/')
  }
})

watch(
      () => route.path,
      (newPath) => {
        // console.log("变化",router)
        counterPage.value=handleRouteChange(route,1)
      }
    );
</script>


<style scoped>

.community{
  width: 100%;
  height: calc(100% - 40px);
  padding-top: 40px;
  display: flex;
  overflow: hidden;
  flex-direction: row;
}
.left-menu{
  height: 100%;
  width: 15%;
  min-width: 160px;
  padding-top: 20px;
  list-style: none;
  background: linear-gradient(to bottom, rgb(0, 251, 255), rgb(27, 123, 233));
  /* z-index: 999; */
}
.menu{
  width: 80%;
  height: 7%;
  margin: auto;
  margin-bottom: 20px;
  border-radius: 30px;
  cursor: pointer;
  /* background-color: yellowgreen; */

}
.menu:hover{
  background-color: rgba(240, 248, 255, 0.452);
}.menu.active{
  background-color: rgba(240, 248, 255, 0.452);
}
.menu-body{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  margin-left: 25px;
  /* background-color: aliceblue; */
  flex-direction: row;
}
.menu-icon{
  width: 33px;
  height: 33px;
  border-radius: 50%;
}
.menu-title{
  margin-left: 10px;
  font-size: larger;
  font-weight: 600;
}
.right-body{
  height: 100%;
  width: 85%;
  background-color: rgba(0, 217, 255, 0.075);
  /* overflow: auto; */
  position: relative;
  /* overflow: hidden; */
  /* z-index: 111; */
  /* display: flex; */
}
</style>